<template>
  <div class="common-wrapper">
    <div class="common-search l-f l-row-sb">
      <a-form-model :model="queryForm" layout="inline">
        <a-form-model-item label="名称">
          <a-input v-model="queryForm.class_name" placeholder="请输入" allowClear />
        </a-form-model-item>
        <a-form-model-item>
          <a-button @click="getTableData" type="primary" icon="search" class="l-mg-r10">搜索</a-button>
        </a-form-model-item>
      </a-form-model>
      <div>
        <a-button @click="onAdd" type="primary" icon="plus" class="l-mg-r10">添加</a-button>
        <!-- <a-button
          @click="onEdit"
          type="primary"
          icon="edit"
          :disabled="selectedRowKeys.length === 1 ? false : true"
          class="l-mg-r10"
          >修改</a-button
        > -->
        <a-button @click="onDel" type="primary" icon="delete" :disabled="!hasSelected" class="l-mg-r10">删除</a-button>
        <a-button @click="getTableData" type="primary" icon="redo" class="l-mg-r10">刷新</a-button>
      </div>
    </div>
    <a-table
      size="middle"
      rowKey="pkey"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :scroll="{ y: 500, x: 1200 }"
      :data-source="dataSource"
      bordered
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
    <template slot="action" slot-scope="text, record">
          <a-button @click="onEdit(record)" type="link" icon="edit" size="small">修改</a-button>
    </template>
    </a-table>
    <!-- 固定班次 -->
    <ShiftScheduleForm ref="fixedScheduleFormRef" />
  </div>
</template>
  
  <script>
import ShiftScheduleForm from './components/ShiftScheduleForm.vue'
import { getShiftAttClassListApi, delShiftAttClassApi } from '@/api/attendance'
export default {
  components: {
    ShiftScheduleForm,
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  data() {
    const columns = [
      {
        title: '编号',
        dataIndex: 'shift_no',
        align: 'center',
        width: 50
      },
      {
        title: '部门名称',
        dataIndex: 'dep_name',
        align: 'center',
        with: 150
      },
      {
        title: '名称',
        dataIndex: 'shift_name',
        align: 'center',
        width: 250
      },
      {
        title: '周期(天)',
        dataIndex: 'shift_cyc',
        align: 'center',
        width: 150
      },
      {
        title: '是否默认',
        dataIndex: 'def_shift',
        align: 'center',
        width: 120
      },
      {
        title: '备注',
        dataIndex: 'remark'
      },
      {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        width: 100,
        fixed: 'right',
        scopedSlots: { customRender: 'action' },
      }
    ]
    return {
      queryForm: {
        class_name: '',
      },
      columns,
      /* 分页参数 */
      pagination: {
        current: 1,
        pageSize: 20,
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        pageSizeOptions: ['10', '20', '30', '40', '50','100','500','1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      loading: false,
      dataSource: [],
      selectedRowKeys: [],
      selectedRows: [],
      shift_no: '',
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    onAdd() {
      this.$refs.fixedScheduleFormRef.add(Number(this.shift_no))
    },
    onEdit(row) {
      this.$refs.fixedScheduleFormRef.edit(row)
    },
    onDel() {
      this.$confirm({
        title: '提示',
        content: '确定删除吗？',
        onOk: async () => {
          const { statusCode, errors } = await delShiftAttClassApi({
            pkeys: this.selectedRowKeys,
          })
          if (statusCode == 200) {
            this.$message.success('删除成功！')
            this.selectedRowKeys = []
            this.getTableData()
          } else {
            this.$message.error(errors)
          }
        },
      })
    },
    // 选择数据
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      const selectArr = []
      selectedRows.forEach((item) => {
        selectArr.push(item.pkey)
      })
      console.log(selectArr)
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.getTableData()
    },
    showModal() {
      this.visible = true
    },
    async getTableData() {
      this.loading = true
      const { data } = await getShiftAttClassListApi({
        ...this.queryForm,
        page_index: this.pagination.current,
        page_size: this.pagination.pageSize,
      })
      this.loading = false
      this.dataSource = data.items
      this.pagination.total = data.totalCount
      if (this.pagination.current === 1) {
        try {
          this.shift_no = Number(data.items[0].shift_no) + 1
        } catch (error) {
          this.shift_no = 1
        }
      }
    },
  },
}
</script>
  
  <style lang="less" scoped>
</style>